<template>
    <div class="blogContent">
        <div class="blogContent-box">
            <!-- 标题 -->
            <h3> {{ blogItemContent.title }}</h3>

            <!-- 类别和发表时间和点赞 -->
            <div class="timer-class-good-box">
                <span><van-icon name="user-circle-o" />{{ blogItemContent.author }}</span> ·
                <span><van-icon name="underway-o" />{{ blogItemContent.create_timer }}</span> ·
                <div><van-icon name="eye-o" />
                    <p>{{ blogItemContent.look_count }}</p>
                </div>·
                <p><van-icon name="apps-o" />{{ blogItemContent.article_class }}</p>

            </div>

            <!-- 分割线 -->
            <van-divider :style="{ borderColor: '#333', margin: '10px' }" dashed />

            <!-- 标签 -->
            <span class="articleTag" v-for="item in articleTagArr">#{{ item }}</span>

            <!-- 内容区 -->
            <p class="blogContent-content-title">内容</p>
            <div class="blogContent-html" v-html="blogItemContent.content_html"></div>
        </div>

        <!-- 评论区 -->
        <comment-area></comment-area>
      
    </div>
</template>
<script setup>
import commentArea from "@/components/blogContent/commentArea.vue";
import { blogContent, } from "@/api/request";
import { ref, onBeforeMount } from "vue";
import { useRoute } from "vue-router";

import { storeToRefs } from "pinia";
import { useStore } from "@/store";
const store = useStore();
let { contentID } = storeToRefs(store);

const route = useRoute();
const id = ref('')
const blogItemContent = ref('');
// 标签
const articleTagArr = ref('')



// 
onBeforeMount(() => {
    // console.log('路由', route.query);
    id.value = route.query.blogItemID;
    contentID.value = route.query.blogItemID
    // axios请求内容
    blogContent({
        id: id.value
    }).then(({ data }) => {
        // console.log('数据', data.data);
        blogItemContent.value = data.data[0]
        // 修改存放在 pinia的 contentID
        contentID.value = blogItemContent.value.id
        // console.log(contentID.value);
        if (blogItemContent.value.article_tag) {
            articleTagArr.value = blogItemContent.value.article_tag.split(',')
        }
    });

})


</script>

<style lang="scss">
.blogContent {
    height: 100%;
    width: 100%;
    padding: 50px 14px 14px;
    box-sizing: border-box;
    // display: flex;
    word-break: break-all;
    word-wrap: break-word;

    .blogContent-box {
        background-color: #fff;
        margin: 20px auto;
        padding: 0px 10px 30px;
        box-sizing: border-box;
        border-radius: 10px;

        // 标签
        >.articleTag {
            font-size: 12px;
            padding: 4px;
            margin-right: 10px;
            border-radius: 6px;
            color: #fff;
            background-color: #4f9cfb;
            background-image: linear-gradient(130deg, rgba(255, 255, 255, 0.677) 0%, #4f9cfb 20%);

        }

        >h3 {
            font-size: 1.125rem;
            font-weight: bold;
            line-height: 1.375rem;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            padding-top: 1.25rem;
        }

        // 作者标签啥的
        .timer-class-good-box {
            font-size: .75rem;
            display: flex;
            justify-content: space-around;

            >div {
                display: flex;
                align-items: center;

                >p {
                    margin-left: 4px;
                }
            }

            p {
                margin: 0;
            }
        }

        // 内容区头
        .blogContent-content-title {
            font-size: 1rem;
            font-weight: bold;
            padding: .625rem 0;
            margin: .625rem 0 0 0;

            &:before {
                display: inline-block;
                content: "";
                width: .25rem;
                height: .75rem;
                margin-right: .625rem;
                background-color: var(--motifColor);
            }
        }

        // 中间html内容
        .blogContent-html {
            border-radius: .3125rem;
            padding: .625rem;
            box-sizing: border-box;
            overflow-x: auto;


            p,
            li {
                white-space: pre-wrap;
                /* 保留空格 */
            }

            img {
                width: 100%
            }

            blockquote {
                border-left: 8px solid #d0e5f2;
                padding: .625rem .625rem;
                margin: .625rem 0;
                background-color: #f1f1f1;
            }

            code {
                font-family: monospace;
                background-color: #eee;
                padding: 3px;
                border-radius: 3px;
                box-sizing: border-box;
                overflow: auto;

            }

            pre>code {
                display: block;
                padding: 10px;
                box-sizing: border-box;
                word-break: break-all;
            }

            table {
                border-collapse: collapse;
            }

            td,
            th {
                border: 1px solid #ccc;
                min-width: 3.125rem;
                height: 1.25rem;
            }

            th {
                background-color: #f1f1f1;
            }

            ul,
            ol {
                padding-left: 1.25rem;
            }

            input[type="checkbox"] {
                margin-right: .3125rem;
            }
        }
    }

    // 评论区
    .blogContent-comment {


        .blogContent-comment-title {
            font-size: 1rem;
            font-weight: bold;
            padding: .625rem 0;

            &:before {
                display: inline-block;
                content: "";
                width: .25rem;
                height: .75rem;
                margin-right: .625rem;
                background-color: var(--motifColor);
            }
        }

        .blogContent-comment-area {
            .van-cell-group {}
        }
    }


}
</style>